<template>
  <div class="page">
    <div class="top">
      <span>店铺活动</span>
    </div>
    <div class="activity-list">
      <div class="activity" v-for="(activity, index) in shopActivityList" :key="index">
        <div class="info">
          <div class="activities-flag" :style="{ backgroundColor: activity.strikingColor }">{{ activity.strikingChar }}</div>
          <div class="info-content">
            <div class="row1">
              <span class="name">{{ activity.name }}</span>
              <span class="open unselectable" @click="openRoute(activity.id)">打开</span>
            </div>
            <div class="row2">
              <span class="describe" :title="activity.describe">{{ activity.describe }}</span>
            </div>
          </div>
        </div>
        <el-divider class="line" />
        <div class="supplement-info">
          <div class="flags">
            <el-tag v-for="flag in activity.flags == null ? [] : activity.flags.split(',')" :key="flag">{{ flag }}</el-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { moduleRouteNavigation } from '@/router/modules'
import ComponentHat from '@/plugins/type'
import { computed, getCurrentInstance, onMounted, ref } from 'vue'
import { ShopActivity } from '@/types/entity/ShopActivity'

const { $store, $API, $modal } = <ComponentHat>getCurrentInstance().proxy
function openRoute(activityTypeId: number) {
  moduleRouteNavigation(activityTypeId, { activityTypeId })
}
const shopActivityList = ref<ShopActivity[]>()
onMounted(async () => {
  const result = await $API.shopActivity.listShopActivity()
  if (!result.success) {
    $modal.msgError(result.message)
    return
  }
  shopActivityList.value = result.data
})
// === style vars ===
// // 屏幕宽度
// const windowWidth = ref(0)
// // 屏幕高度
// const windowHeight = ref(0)
// // 生命周期
// onMounted(() => {
//   getWindowResize()
//   window.addEventListener('resize', getWindowResize)
// })
// // 获取屏幕尺寸
// const getWindowResize = function () {
//   windowWidth.value = window.innerWidth
//   windowHeight.value = window.innerHeight
// }
// const rowItemCount = computed(() => (windowWidth.value < 900 ? 2 : 3))
</script>

<style scoped lang="scss">
@use 'sass:math';

.page {
  display: block;
  padding: 0 20px;
  box-sizing: border-box;

  .top {
    line-height: 50px;
    width: 100%;

    span {
      font-weight: 700;
    }
  }

  .activity-list {
    $margin-size: 1%;

    display: flex;
    width: 100%;
    flex-wrap: wrap;

    .activity {
      $row-size: 3;

      display: flex;
      margin: 0 $margin-size 20px;
      padding: 13px;
      width: (100% - $margin-size * $row-size * 2) * math.div(1, 3);
      border: 1px solid #f3f3f3;
      background-color: #fff;
      flex-direction: column;
      box-sizing: border-box;

      .info {
        display: flex;
        justify-content: space-between;

        .activities-flag {
          $font-size: 26px;
          $size: 47px;

          align-items: center;
          min-width: $size;
          max-width: $size;
          min-height: $size;
          max-height: $size;
          font-size: $font-size;
          border-radius: 3px;
          text-align: center;
          color: #fff;
          background-color: #fc3b30;
          line-height: $size;
        }

        .info-content {
          display: flex;
          justify-content: space-between;
          margin-left: 7px;
          flex-grow: 1;
          flex-direction: column;
          box-sizing: border-box;
          padding: 3px 0;

          .row1 {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .name {
              font-size: 17px;
              font-weight: 700;
            }

            .open {
              font-size: 14px;
              color: #838383;
              cursor: pointer;
            }
          }

          .row2 {
            display: flex;

            .describe {
              display: inline-block;
              overflow: hidden;
              width: 0;
              font-size: 13px;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #676767;
              flex-grow: 1;
              cursor: pointer;
            }
          }
        }
      }

      .line {
        margin: 15px 0 10px;
      }

      .supplement-info {
        .flags {
          > * {
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
